<template>
  <!-- 调整信息 -->
  <el-dialog title="调整信息" :visible.sync="showFurther" width="70%" :before-close="closeFurther" :close-on-click-modal="false">
    <div v-if="[1].includes(statusList)" class="m_title">资产：{{ dialogTitle }}</div>
    <div v-if="[2].includes(statusList)" class="m_title">支出事项：{{ dialogTitle }}</div>
    <el-table :data="tableData" ref="multipleTable" border tooltip-effect="dark" align="center" stripe>
      <el-table-column v-for="(item, index) in planRevenueChangeTitle" :key="index" :prop="item.prop" :label="item.label" header-align="center" :width="item.width ? item.width : null" :align="item.align ? item.align : null" :fixed="item.fixed ? item.fixed : null">
        <template slot-scope="scope">
          <div v-if="item.prop === 'adjustDate'">{{ scope.row.adjustDate }}</div>
          <div v-if="item.prop === 'adjustContent'">{{ scope.row.adjustContent }}</div>
          <div v-if="item.prop === 'adjustAmount'">
            <span>{{ scope.row.adjustAmount > 0 ? '增加' : '减少' }}</span>
            <span>{{ scope.row.adjustAmount | moneyFilter }}元</span>
          </div>
          <div v-if="item.prop === 'adjustImpact'">
            <span>{{ scope.row.adjustImpact > 0 ? '全年收入增加' : '全年收入减少' }}</span>
            <span>{{ scope.row.adjustImpact * 100 | percentageFilter }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>

export default {
  props: {
    showFurther: {
      type: Boolean,
      default: false,
    },
    statusList: {
      type: Number,
      default: 1,
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dialogTitle: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      title: '',
      // tableData: [
      //   {adjustmentTime:'2021/3/25',adjustmentContent:'提前退租，离场时间2021年7月12日，计划起租时间2021年9月15日',adjustmentMoney:'增加￥20,201',adjustmentInfluence:'全年收入增加0.2%'},
      //   {adjustmentTime:'2021/2/25',adjustmentContent:'续租，租金为16.2元/㎡/天',adjustmentMoney:'增加￥521,300',adjustmentInfluence:'全年收入增加3.8%'},
      //   {adjustmentTime:'2021/3/25',adjustmentContent:'事项废止',adjustmentMoney:'减少￥20,000元',adjustmentInfluence:'全年支出减少1%'},
      // ],
    };
  },
  mounted() {},
  methods: {
    // 取消
    closeFurther() {
      this.$emit('close-dialog', false);
    },
  },
  computed: {
    //表头
    planRevenueChangeTitle() {
      let align = 'center';
      let width = false;
      let planRevenueChangeArr = [
        {
          prop: 'adjustDate',
          label: '调整时间',
          width: '200px',
          align,
        },
        {
          prop: 'adjustContent',
          label: '调整内容',
          width,
          align,
        },
        {
          prop: 'adjustAmount',
          label: '调整金额',
          width: '150px',
          align,
        },
        {
          prop: 'adjustImpact',
          label: '调整影响',
          width: '200px',
          align,
        },
      ];
      return planRevenueChangeArr;
    },
  },
  filters: {
    moneyFilter(money) {
      if (money && money !== null) {
        let m = parseInt(money) + '';
        var left = m.split('.')[0],
          right = m.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var temp = left
          .split('')
          .reverse()
          .join('')
          .match(/(\d{1,3})/g);
        return '¥' + temp.join(',').split('').reverse().join('') + right;
      } else if (money == 0) {
        return '00.0';
      } else {
        return '';
      }
    },

    percentageFilter(num) {
      return Math.abs(num) + '%';
    },
  },
};
</script>

<style lang="scss" scoped>
.m_title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
::v-deep .el-dialog {
  min-height: 400px;
  .el-dialog__header {
    background: #444;
  }
}
</style>
